<template>
  <el-dialog :close-on-click-modal="false" class="permissionRowClass" title="行功能权限设置" :visible.sync="outerVisible" @close="close">
    <div class="content">
            <div class="contentTitle">{{this.params.rowData.moduleName}}</div>
            <div class="contentHeader">
                 <el-input placeholder="请选择权限参数" v-model="currentPermissionParams" class="input-with-select">
                     <el-button slot="append" icon="el-icon-view"></el-button>
                 </el-input>
                 <div class="buttons">
                        <el-button  type="primary" @click="confirm">新建</el-button>
                        <el-button  @click="close">保存</el-button>
                  </div>
            </div>
            <el-table
                :data="permissionFieldData"
                class="columnTableClass"
                style="width: 100%"
              >
                <el-table-column
                    prop="fieldName"
                    label="字段名"
                    width="150"
                  >
                </el-table-column>
                <el-table-column
                    prop="displayColumn"
                    label="业务范围"
                    style="display:flex;just-content:center"
                  >
                   <template slot-scope="scope">
                           <el-input placeholder="请选择业务范围" v-model="scope.row.dataPermission" class="input-with-select">
                           <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </template>
                </el-table-column>
           </el-table>
    </div>
  </el-dialog>
</template>
<script lang="ts">
 
import { Component, Vue,Inject,Emit,Prop} from 'vue-property-decorator';
import CommonUtils from "@/common/utils/common-utils";
import PermissionApi from "@/api/permission-api";
import PermissionParams from "@/components/permission-setting/dialog/permission-params.vue";
@Component({
  components: {
      PermissionParams
  },
})
export default class PermissionRowSettingDialog extends Vue {
    @Prop() private params!: any;
    private outerVisible:boolean=true;
    private loading:boolean=false;
    private title:any="";
    private permissionFieldData:any=[];
    async created(){
           this.loading=true;
           this.loading=false;
           this.title=this.params.rowData.moduleName;
           const permissionFieldData=await PermissionApi.getTableColumnDetial({row:this.params.rowData});
           this.permissionFieldData=permissionFieldData;
           this.$nextTick(()=>{
                 CommonUtils.centerDialog();
           });
     }
     @Emit("close")
     private close(){
         this.outerVisible=false;
     }
     //确认框
     private confirm(){
         this.close();
     }
}
</script>
<style lang="less">
    .permissionRowClass{
        height: 100%;
        width: 100%;
        .el-dialog{
              width: 1100px;
              height: 580px;
              .el-dialog__body {
                    padding: 0px 0px;
                    color: #606266;
                    font-size: 14px;
                     height: calc(100% - 130px);
                    word-break: break-all;
                    .columnTableClass{
                        margin-left: 20px;
                        width: calc(100% - 30px)!important;
                        height: calc(100% - 50px)!important;
                        .el-input__inner{
                            height: 36px;
                        }
                    }
                    .has-gutter{
                         tr th:nth-of-type(2){
                              .cell{
                                 display: flex;
                                 justify-content:center;
                              }
                         }
                    }
                    .content{
                        height: 100%;
                        .contentTitle{
                            margin-left: 20px;
                        }
                        .contentHeader{
                            display: flex;
                            justify-content:space-between;
                            width: calc(100% - 50px);
                            margin-left: 20px;
                            margin-top: 10px;
                            .el-input-group{
                                width: 40%;
                            }
                        }
                        .buttons{
                            width: 60%;
                            display: flex;
                            justify-content: space-between;
                            margin-left: 10px;
                        }
                    }
             }
            .dialog-footer{
                justify-content: center;
                display: flex;
            }
        }
    }
</style>
